#posts {
  .post-list {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 40px 24px;

    .ant-row {
      & > div {
        .ant-list-item {
          margin-bottom: 20px;
          padding: 15px;
          border-radius: 4px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, .05), 0 0 1px rgba(0, 0, 0, .1);
          transition: all 0.6s;

          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          }

          .ant-list-item-main {
            .ant-list-item-meta-title {
              font-size: 18px;

              a {
                color: #314659;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .ant-tag {
              margin-right: 0;
              border-color: @primary-color-2;
              background-color: @primary-color-1;
            }

            .ant-list-item-action {
              li {
                margin-left: 4px;
                padding: 0;
                cursor: auto;
              }
            }
          }

          .ant-list-item-extra {
            position: relative;
            margin-left: 10px;
            border-radius: 8px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, .4);
            overflow: hidden;
            cursor: pointer;

            .banner {
              width: 150px;
              height: 150px;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
              border-radius: 8px;
            }

            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: -100%;
              background: linear-gradient(to right, transparent, #fff, transparent);
              transition: all 300ms;
            }

            &:hover {
              &::before {
                left: 100%;
              }
            }
          }
        }
      }
    }

    .ant-list-pagination {
      text-align: center;
    }
  }
}

body.dark {
  #posts {
    .post-list {
      .ant-row {
        & > div {
          .ant-list-item {
            .ant-list-item-main {
              .ant-list-item-meta-title {
                a {
                  color: @dark-text-color;
                }
              }

              .ant-tag {
                color: @dark-text-color-7;
                border-color: @dark-text-color-10;
                background-color: @dark-text-color-10;
              }

              .ant-list-item-action {
                li {
                  color: @dark-text-color-9;
                }
              }
            }

            .ant-list-item-extra {
              filter: brightness(50%);
            }
          }
        }
      }

      .ant-list-pagination {
        .ant-pagination {
          color: @dark-text-color;

          .ant-pagination-item {
            background-color: @dark-bg-color;
          }

          a {
            color: @dark-text-color;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  #posts {
    .post-list {
      padding-top: 20px;

      .ant-row {
        & > div {
          .ant-list-item {
            .ant-list-item-main {
              margin-top: 30px;
              text-align: center;
            }

            .ant-list-item-extra-wrap {
              justify-content: center;

              .ant-list-item-extra {
                margin: auto 10px;
              }
            }
          }
        }
      }
    }
  }
}
